<template>
    <div class="page">

        <van-nav-bar
            title="搜索结果"
            left-arrow
            @click-left="onClickLeft"

        />
        <div class="tabs">
            <div class="tab-item" :class="tab==0?'tab-itemactive':''" @click="changetab(0)">推荐</div>
            <div class="tab-item" :class="tab==1?'tab-itemactive':''" @click="changetab(1)">价格</div>
            <div class="tab-item" :class="tab==2?'tab-itemactive':''" @click="changetab(2)">销量</div>
            <!-- <div class="tab-item" :class="tab==3?'tab-itemactive':''" @click="changetab(3)">筛选<van-icon name="filter-o" /></div> -->
        </div>
        <div class="tab-item">
            <div class="product"  v-for="(item, index) in dataList" :key="item.id" @click="goGoods(index)">
                <img :src="item.img">
                <p class="product-title">{{item.name}}</p>
                <div class="product-tip">
                    <span>已售{{item.sale}}件</span>
                    <span>积分抵扣0%</span>
                </div>
                <div class="product-bottom">
                    <span>￥{{item.market_price}}</span>
                    <span>￥{{item.sell_price}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
          tab:0,
          dataList: [],//商品列表,
          keywords: '',
          price: 0, // 0升序 1降序
          sale: 0,
        }
    },
    methods:{
      // 切换tab
      changetab(index){
        this.tab=index
        let obj = {
          keywords: this.keywords
        }
        switch (index) {
          case 0:
          console.log(0)
            this.getList()
            break;
          case 1:
          console.log(1)
            obj.order = 'sell_price'
            if(this.price == 0){
              obj.by = 'asc'  // 升序
              this.price = 1
            }else{
              obj.by = 'desc'  // 降序
              this.price = 0
            }
            this.getOrderList(obj)
            break;
          case 2:
          console.log(2)
            obj.order = 'sale'
            if(this.price == 0){
              obj.by = 'asc'  // 升序
              this.sale = 1
            }else{
              obj.by = 'desc'  // 降序
              this.sale = 0
            }
            this.getOrderList(obj)
            break;
          default:
            break;
        }
      },
      // 返回上页
      onClickLeft(){
          this.$router.go(-1);
      },
      // order是按照价格排序， by是按照销量排序
      getOrderList(obj){
        this.request({
          url: '?controller=theapi&action=goods_list',
          params: obj
        }).then(res=>{
          this.dataList=res.data.data
        })
      },

      getList(key){
        console.log(key);
        this.request({
          url: '?controller=theapi&action=goods_list',
          params: {
            keywords: key
          }
        }).then(res=>{
          console.log(res)
          this.dataList=res.data.data
        })
      },
      goGoods(index){
        console.log(index)
        this.$router.push({
          name: 'ProductDetails',
          params: {
            id: this.dataList[index].id
          }
        })
      }
    },
    created(){
      let keywords = this.$route.params
      // this.keywords = keywords;
      console.log(keywords);
      this.getList(keywords.id)
    }
}
</script>
<style scoped>
    .page>>> .van-nav-bar .van-icon{color: black;}
    .tabs{
      display: flex;
      height: 1rem;
      line-height: 1rem;
      border-bottom: 1px solid #e6e6e6;
    }
    .tab-item{
      flex: 1;
      text-align: center;
      font-size: 0.3rem;
    }
    .tab-itemactive{
      border-bottom:1px solid #f57397;
    }
    .content{
      display: flex;
      justify-content: space-between;
      padding: 0.2rem;
      background: #e6e6e6;
      flex-wrap: wrap;
    }
    .product{
      width: 3.5rem;
      background: white;
      padding-bottom:0.2rem;
      margin-bottom: 0.2rem;
    }
    .product img{
      width: 100%;
      height: 2.5rem;
    }
    .product-title{
      margin-top: 0.2rem;
      font-size: 0.3rem;
      padding: 0 0.2rem;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .product-tip{
      display: flex;
      justify-content: space-between;
      font-size: 0.25rem;
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      align-items: center;
    }
    .product-tip span:nth-child(2){
      border: 1px solid #f54375;
      padding: 0.05rem;
      border-radius: 0.2rem;
      color: #f54375;
    }
    .product-bottom{
      display: flex;
      font-size: 0.25rem;
      margin-top: 0.2rem;
      padding: 0 0.2rem;
      align-items: center;
    }
    .product-bottom span:nth-child(1){
      font-size: 0.3rem;
      color: #f54375;
      font-weight: bold;
    }
    .product-bottom span:nth-child(2){
      margin-left: 0.2rem;
      color: #ccc;
      text-decoration:line-through;
    }
</style>


